<template>
  <view class="container">
    <custom-navbar :immersive="true" color="#333"> </custom-navbar>
    <view :style="{ paddingTop: `${navbarHeight}px` }"></view>
    <view>
      <view class="container_card" v-if="citizenInfo.cardNo">
        <view class="container_card_info">
          <image src="/static/image/citizen_icon.png" mode="widthFix" />
          <view style="margin-left: 10rpx">
            <view class="container_card_info_title">临海市民卡 </view>
            <view class="container_card_info_tip"
              >{{ citizenInfo.cardTypeDesc }}
              <text class="container_card_info_tip_red" v-if="citizenInfo.cardType && citizenInfo.cardType === '260'">（惠民卡享社发配送购物8.8折）</text>
            </view>
          </view>
        </view>
        <view class="container_card_id">
          <view v-for="(item, index) in dotList" :key="index" class="container_card_id_dot"></view>
          <view style="width: 20rpx"></view>
          <view v-for="(item, index) in dotList" :key="index" class="container_card_id_dot"></view>
          <view style="width: 20rpx"></view>
          <view v-for="(item, index) in dotList" :key="index" class="container_card_id_dot"></view>
          <view style="width: 20rpx"></view>
          <view>{{ cardMask(citizenInfo.cardNo) }}</view>
        </view>
      </view>

      <button class="container_add" @click="add">+ 添加市民卡</button>
      <view class="container_bottom">
        <button @click="showUnbindDialog">解除当前市民卡</button>
      </view>

      <uni-popup ref="popup">
        <view class="container_pop">
          <image class="container_pop_close" src="/static/image/close.png" mode="widthFix" @click="closeDialog" />
          <view class="container_pop_title">提示</view>
          <view class="container_pop_content">是否确定解除该市民卡绑定</view>
          <view class="container_pop_button">
            <button class="container_pop_button_left" @click="closeDialog">取消</button>
            <button class="container_pop_button_right" @tap="goUnbind">确认</button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { getToken, getUserInfo, clearToken, clearUserInfo } from '@/service/auth.js'

import navbarMixin from '@/mxins/navbar.js'
import { getRealInfo, unBindCitizen, citizenList } from '@/service/api/citizen.js'
import { maskBankCard } from '@/utils/func.js'
export default {
  mixins: [navbarMixin],
  components: {},
  data() {
    return {
      user: {},
      citizenInfo: {},
      dotList: [{}, {}, {}, {}],
    }
  },
  onLoad() {
    const data = getUserInfo()
    this.user = JSON.parse(data)
    //获取市民卡信息
    this.getCitizenInfo()
  },
  onShow() {
    const app = getApp()
  },
  created() {},

  methods: {
    cardMask(cardNo) {
      return maskBankCard(cardNo)
    },
    getCitizenInfo() {
      this.uniShowLoading()
      getRealInfo()
        .then(async res => {
          console.log('res', res)
          // 实名认证状态(实名绑定状态0-未实名 1-已实名未绑卡 2-已绑定)
          this.uniHideLoading()
          this.citizenInfo = res.data
          const subRes = await citizenList().catch(err => {
            this.uniHideLoading()
            this.uniShowToast(err.msg)
          })
          if (this.citizenInfo && subRes && subRes.status === 200) {
            const list = subRes.data.content
            const bindItem = list.find(item => item.cardNo === this.citizenInfo.cardNo)
            if (bindItem) {
              this.citizenInfo = bindItem
            }
          }
        })
        .catch(err => {
          this.uniHideLoading()
          this.uniShowToast(err.msg)
        })
    },
    add() {
      //要先实名
      const _that = this
      if (_that.citizenInfo.status && _that.citizenInfo.status === 0) {
        return uni.showModal({
          title: '提示',
          content: '请先实名',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              _that.goCitizenCard()
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          },
        })
      }
      uni.navigateTo({
        url: '/pageShopping/citizen/list',
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: data => {
            _that.getCitizenInfo()
          },
        },
      })
    },
    showUnbindDialog() {
      if (!this.citizenInfo.cardNo) {
        return this.uniShowToast('请先绑卡')
      }
      this.$refs.popup.open()
    },
    closeDialog() {
      this.$refs.popup.close()
    },
    goUnbind() {
      //解绑市民卡
      this.uniShowLoading()
      unBindCitizen()
        .then(res => {
          console.log('res', res)
          // 实名认证状态(实名绑定状态0-未实名 1-已实名未绑卡 2-已绑定)
          this.uniHideLoading()
          this.uniShowToast('解绑成功')
          this.getCitizenInfo()
          this.$refs.popup.close()
        })
        .catch(err => {
          this.uniHideLoading()
          this.uniShowToast(err.msg)
        })
    },
    goCitizenCard() {
      this.goCitizen(this.user.userId)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  font-size: 28rpx;
  background: linear-gradient(to bottom, #edfff1 10%, #f6f6f6 48%);
  &_card {
    background-image: url(/static/image/citizen_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 20rpx;
    padding: 30rpx 40rpx;
    border-radius: 20rpx;
    color: white;
    &_info {
      display: flex;
      align-items: center;
      image {
        width: 70rpx;
      }
      &_title {
        font-weight: bold;
        font-size: 32rpx;
      }
      &_tip {
        font-size: 26rpx;
        &_red {
          color: red;
        }
      }
    }

    &_id {
      font-size: 36rpx;
      margin-top: 20rpx;
      letter-spacing: 2rpx;
      display: flex;
      align-items: center;
      &_dot {
        width: 8rpx;
        height: 8rpx;
        background-color: white;
        border-radius: 50%;
        margin-right: 15rpx;
      }
    }
  }
  &_add {
    background-color: white;
    border-radius: 10rpx;
    text-align: left;
    margin: 20rpx;
    padding: 20rpx;
  }
  &_bottom {
    position: fixed;
    bottom: 100rpx;
    left: 20rpx;
    right: 20rpx;
    button {
      background-color: white;
    }
  }
  &_pop {
    background-image: url('/static/image/unbind_citizen_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 600rpx;
    border-radius: 20rpx;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    &_close {
      width: 35rpx;
      position: absolute;
      right: 20rpx;
      top: 70rpx;
    }
    &_title {
      margin-top: 160rpx;
      font-size: 32rpx;
    }
    &_content {
      margin: 20rpx auto;
    }
    &_button {
      display: flex;
      margin: 60rpx 0 30rpx 0;
      &_left {
        width: 220rpx;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 30rpx;
        border: 1rpx solid #d9d9d9;
        background-color: white;
        border-radius: 50rpx;
        margin-right: 20rpx;
      }
      &_right {
        width: 220rpx;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 30rpx;
        color: white;
        margin-left: 20rpx;
        background: linear-gradient(to right, #77e399, #26bb55);
        border-radius: 50rpx;
      }
    }
  }
}
</style>
